<template>
  <div :style="containerBg" class="floor5-container">
    <title-item :title="titleList[4]"></title-item>

    <ul class="item-container clearfix">
      <li v-for="(temp, index) in floorData" :key="'miva'+index" class="item-box">
        <div class="img-box">
          <img :src="temp.img" alt>
        </div>
        <div class="txt">{{temp.txt}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import data from "@/data/index.json";

export default {
  props: {
    floorData: {
      type: Array,
      default() {
        return [
          {
            img: require("@/assets/img/ceshi.png"),
            txt:
              "从公司成立至今，我们的业务方向越来越广，只要是涉及到互联网行业的大多数业务我们都能做。只要您信任我们，我们就会给您一个满意的答"
          },
          {
            img: require("@/assets/img/ceshi1.png"),
            txt:
              "网梦正在不断的创新和实践中总结出可持续和可信赖的设计流程，坚持与用户一起思考，用设计的方法发现问题、解决问题、输出 设计方案，"
          },
          {
            img: require("@/assets/img/ceshi2.png"),
            txt:
              "网梦科技多年来积累了大量的案例，并验证了设计的价值。 在不断的探索中总结经验，以结果为导向，继续为更多客户提供优秀的设计和分享"
          }
        ];
      }
    }
  },
  data() {
    return {
      titleList: data.titleList,
      containerBg: `background-image: url(${require("@/assets/img/floor5Bg.png")})`
    };
  }
};
</script>

<style lang="less" scoped>
.floor5-container {
  margin: 50px 0;
  padding-bottom: 50px;
}

.item-box {
  width: 100%/3;
  float: left;
  padding: 10px;
  color: #fff;
  .txt {
    padding: 20px 0;
  }
  @media (max-width: 768px) {
    & {
      width: 100%;
      padding: 15px;
    }
  }
}
</style>
